<template>
  <div class="box">
    <h1>我是父亲曹操:{{ money }}</h1>
    <button @click="handler">找我的儿子曹植借10元</button>
    <hr>
    <Son ref="son"></Son>
    <hr>
    <Dau></Dau>
  </div>
</template>

<script setup lang="ts">
//ref:可以获取真实的DOM节点,可以获取到子组件实例VC
//$parent:可以在子组件内部获取到父组件的实例
//引入子组件
import Son from './Son.vue'
import Dau from './Daughter.vue'
import { ref } from 'vue';
//父组件钱数
let money = ref(100000000);
//获取子组件的实例(需要与上面的子组件ref值同名)
let son = ref();
//父组件内部按钮点击回调
const handler = () => {
  money.value += 10;
  //儿子钱数减去10
  son.value.money -= 10;
  son.value.fly();
}
//对外暴露
defineExpose({
  money
})
</script>

<style scoped>
.box {
  width: 100vw;
  height: 500px;
  background: skyblue;
}
</style>